<template>
	<div class="map-box">
		<div class="title-box sp_between_com">
			<span>社区位置</span>
			<i class="el-icon-refresh" @click="chongzhi"></i>
		</div>
		<div id="info-map"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				map: null
			}
		},
		mounted() {
			setTimeout(() => {
				this.init()
			}, 1000)
		},
		methods: {
			chongzhi() {
				this.map.setCenter([106.709455, 26.453361])
				this.map.setZoom(17)
			},
			init() {
				this.map = new AMap.Map('info-map', {
					mapStyle: 'amap://styles/darkblue',
					viewMode: '3D',
					showBuildingBlock: true,
					center: [106.709455, 26.453361],
					showLabel: false,
					pitchEnable: true,
					pitch: 70,
					skyColor: '#000928',
					expandZoomRange: true,
					zoom: 17
				});
				setInterval(() => {
					this.map.setRotation((this.map.getRotation() + 0.06) % 360);
				}, 10);
				this.map.on('click', ev => {
					console.log(ev)
				});

			}
		}
	}
</script>

<style scoped>
	.title-box {
		height: 30px;
		line-height: 30px;
		width: 100%;
		padding: 0 10px;
		border-bottom: 2px solid rgba(255, 255, 255, 0.2);
		color: #fff
	}

	.el-icon-refresh {
		height: 30px;
		line-height: 30px;
		font-size: 20px;
		cursor: pointer;

	}

	.map-box {
		height: calc(100%);
		width: 100%;
		overflow: hidden;
		border-radius: 5px;
	}

	#info-map {
		width: 100%;
		height: calc(100%);
	}
</style>
